<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/j.html">
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img src="../../../images/luobo1.png" style="top: 0;">
            </li>
            <li>
                <img src="../../../images/luobo2.png">
            </li>
            <li>
                <img src="../../../images/lunbo3.jpeg" >
            </li>
            <li>
                <img src="../../../images/lunbo4.jpeg" >
            </li>
            <li>
                <img src="../../../images/lunbo5.jpeg" >
            </li>
            <li>
                <img src="img/6.jpg" >
            </li>
            <li>
                <img src="img/1.jpg">
            </li>
        </ul>
        <div class="ser">
            <div class="left">
            </div>
            <div class="left right">	
            </div>
        </div>
    </div>
    <div class="sbox">
        <ul>
            <li>
                <img src="img/5.jpg" >
            </li>
            <li>
                <img src="img/6.jpg" >
            </li>
            <li>
                <img src="img/1.jpg" >
            </li>
            <li>
                <img src="img/2.jpg" >
            </li>
            <li>
                <img src="img/3.jpg" >
            </li>
            <li>
                <img src="img/4.jpg" >
            </li>
            <li>
                <img src="img/5.jpg" >
            </li>
            <li>
                <img src="img/6.jpg" >
            </li>
            <li>
                <img src="img/1.jpg" >
            </li>
            <li>
                <img src="img/2.jpg" >
            </li>
        </ul>
        <div class="gray">
            <div class="grayon">
                
            </div>
            <div class="grayon" style="opacity: 0;">
                
            </div>
            <div class="grayon">
            </div>
        </div>
    </div>
    <script>
    function $c(cl) {
	return document.getElementsByClassName(cl);
}
var oBox=$c("box")[0];
var oUl = $c("sbox")[0].getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var bUL=$c("box")[0].getElementsByTagName("ul")[0];
var bImg=bUL.getElementsByTagName("img");
var arrBtn = $c("left");
var pSha=$c("grayon");
var g = 0,
	kai = true;
arrBtn[0].addEventListener("click", left);
pSha[0].addEventListener("click", left);
arrBtn[1].addEventListener("click", right);
pSha[2].addEventListener("click", right);
oBox.onmousemove=function(ev){
	var oevent = ev || event;
    var distanceX = oevent.clientX-oBox.offsetLeft;
	if(distanceX<150){
		arrBtn[0].style.display="block"
		arrBtn[1].style.display="none"
	}else{
		arrBtn[0].style.display="none"
		arrBtn[1].style.display="block"
	}
}
oBox.onmouseout=function(ev){
	var oevent = ev || event;
    arrBtn[0].style.display="none"
    arrBtn[1].style.display="none"
}

function right() {
	if (kai) {
			kai = false;
			g++;
			bImg[g-1].style.zIndex="4";
            bImg[g].style.zIndex="5";
			bImg[g].style.transition="all 0.5s ease";
		    bImg[g].style.top="0px";
			setTimeout(function() {
			if(g==6){
				bImg[5].style.transition="none";
			}
			bImg[g-1].style.top="-300px";
			if (oUl.style.left == "-700px") {
				g = 0;
				oUl.style.transition = "none";
				oUl.style.left = -100 + "px";
			}
			}, 500);
			setTimeout(function() {
				if(g==0){
			   bImg[6].style.transition="none";
			   bImg[0].style.transition="none";
			   bImg[0].style.top="0px";
			   bImg[6].style.top="-300px";
			}
			pSha[1].style.opacity="0";
			}, 510);
				
			for(i=0;i<pSha.length;i++){
				pSha[i].style.opacity="0.5";
			}
			oUl.style.transition = "all 0.5s ease";
			oUl.style.left = -(g+1)* 100 + "px";
				
			setTimeout(function() {
				kai = true;
			}, 1000);
		}
	}

	function left() {
		if (kai) {
				kai = false;
				g--;
				if(g==-1){
					bImg[6].style.transition="none";
					bImg[6].style.zIndex="4";
					bImg[5].style.zIndex="5";
					bImg[0].style.transition="none";
					bImg[6].style.top="0px";
					bImg[0].style.top="-300px";
					bImg[5].style.transition="all 0.5s ease";
					bImg[5].style.top="0px";
					setTimeout(function() {
						bImg[6].style.top="-300px";
					}, 500);
				}else{
				bImg[g+1].style.zIndex="4";
				bImg[g].style.zIndex="5";
				bImg[g].style.transition="all 0.5s ease";
				bImg[g].style.top="0px";
				setTimeout(function() {
					bImg[g+1].style.transition="none";
					bImg[g+1].style.top="-300px";
					}, 500);
				}
				for(i=0;i<pSha.length;i++){
					pSha[i].style.opacity="0.5";
				}
				oUl.style.transition = "all 0.5s ease";
				oUl.style.left = -(g+1)* 100 + "px";
				setTimeout(function() {
					if (oUl.style.left == "0px") {
						g = 5;
						oUl.style.transition = "none";
						oUl.style.left = -600 + "px";
					}
					}, 500);
				setTimeout(function() {
					pSha[1].style.opacity="0";
				}, 510);	
				setTimeout(function() {
					kai = true;
				}, 1000);
			}
		}
    
    setInterval(right,1000)</script>
</body>
</html>